<template>
    <el-dialog 
        v-model="dialogVis" 
        :title="title" 
        :modal="modal" 
        :close-on-click-modal="clickModel"
        :align-center="alignCenter"
        :draggable="draggable"
        :before-close="modalClose" 
        modal-class="sheet-dialog" 
        :append-to-body="true" 
        destroy-on-close 
        width="30%">
        <!-- <template #header>
            <div class="title dialog__title">{{ title }}</div>
        </template> -->
        <slot default></slot>
        <template #footer v-if="footer">
            <div class="dialog-footer flex footer">
                <el-button size="small" @click="modalClose">取 消</el-button>
                <el-button type="primary" size="small" @click="onSubmit">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { watch, ref } from "vue";
const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    modal: {
        type: Boolean,
        default: true,
    },
    clickModel: {
        type: Boolean,
        default: false,
    },
    alignCenter: {
        type: Boolean,
        default: true,
    },
    draggable: {
        type: Boolean,
        default: true,
    },
    title: {
        type: String,
        default: "",
    },
    footer: {
        type: Boolean,
        default: true,
    },
    close: {
        type: Function,
        default: () => { }
    },
    onSubmit: {
        type: Function,
        default: () => { }
    },
});
const emits = defineEmits(["update:visible"]);
const dialogVis = ref(false);
watch(() => props.visible, (val) => {
  dialogVis.value = val
}, { deep: true, immediate: true })

function modalClose() {
    if (props.close && typeof props.close === 'function') {
        props.close();
    }
    emits("update:visible", false);
}
</script>

<style lang="less" scoped>
.footer{
    display: flex;
    justify-content: center;
}
</style>